import { defineComponent, h, VNodeNormalizedChildren } from 'vue';
import { useCheckboxInjector } from '../composables/useChecbox';

export default defineComponent({
  name: 'NationTemplate',
  props: {
    continental: {
      type: String,
      default: '',
    },
  },
  setup() {
    const { getFlightLines, mapState } = useCheckboxInjector();
    return {
      getFlightLines,
      mapState,
    };
  },
  methods: {
    onClick() {
      let nation: string = '',
        children: VNodeNormalizedChildren;
      if (
        this.$slots.default &&
        (children = this.$slots.default()[0].children)
      ) {
        nation = children.toString();
      }
      this.mapState.currentNation = nation;
      return this.getFlightLines(this.continental, nation);
    },
  },
  render() {
    let txt = '';
    if (this.$slots.default) {
      let children = this.$slots.default()[0].children;
      if (children) {
        txt = children.toString();
      }
    }
    return h(
      'div',
      {
        class: {
          'f-nation': true,
          'f-nation--small': txt && txt.length > 5
        },
        onClick: this.onClick,
      },
      this.$slots.default && this.$slots.default()
    );
  },
});
